<template>
  <svg
    :viewBox="`0 0 ${radius * 2} ${radius * 2}`"
    class="mu-circular-progress-determinate pull-box-load-circle"
    :style="{ width: `${radius * 2}px`, height: `${radius * 2}px`}"
  >
    <circle
      :r="`${radius - strokeWidth / 2}`"
      :cx="`${radius}`"
      :cy="`${radius}`"
      fill="none"
      stroke-miterlimit="20"
      :stroke-width="`${strokeWidth}`"
      class="mu-circular-progress-determinate-path pull-box-load-circle-circle"
      :style="{ 'stroke-dasharray': strokeDasharray }"
    ></circle>
  </svg>
</template>

<script>
export default {
  name: 'PullBoxLoadCircle',
  props: {
    radius: {
      type: Number,
      required: true
    },
    progress: {
      type: Number,
      required: true
    },
    strokeWidth: {
      type: Number,
      default: 3
    }
  },
  computed: {
    strokeDasharray() {
      const total = 2 * Math.PI * this.radius
      const a = this.progress * total
      const b = total - a
      return [a, b].join(', ')
    }
  }
}
</script>

<style>
.pull-box-load-circle-circle {
  transition: all 0.1s;
}
</style>
